<template>
    <div class="modal fade" id="addChooseM2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel"> 同步M2楼盘</h4>
          	</div>
            <ul style="">
            	<li v-for="(list, index) in projectList" style="cursor:pointer" v-bind:id="index" v-if="list.synFlag=='F'" @click="selected(list, index)">
            		{{list.projectName}}
            	</li>
            	<li v-else="list.synFlag=='T'" class="li_gray">{{list.projectName}}</li>
            </ul>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="savePremisesByM2">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<style scoped>
.modal-content ul {min-height: 200px; margin-left: 50px;}
.modal-content ul li{width:150px; float:left; margin:10px;}
.li_gray{color: #ccc;}
.li_selected{color: #f87242;}
</style>

<script>
	export default{
		//接收父组件的绑定值
		props: ["chooseM2Modal"],
		data() {
			return {
				projectList:[],
				premises: {
					projectName: '',
					projectCode: ''
				},
				btnShow: true
			}
		},
		watch: {
			//监听父组件绑定值是否改变
			chooseM2Modal: {
				handler: function(val, oldVal){
					this.initPremisesByM2();
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		methods: {
			initPremisesByM2(){
				var _self = this;
				var body={};
				body.params = {};
				var url = this.utilHelper.apiUrl+'/api/getPremisesByM2.do';
				_self.$http.post(url, body).then((response)=>{
					var resData = response.body ;
					if(resData.result == "1"){
                		_self.projectList = resData.resData.projectList;
                	}
				});
			},selected(info, index){
				$("ul li").each(function(){
					var liClass = $(this).attr("class");
					if(liClass){
						if("li_gray" != liClass){
							$(this).removeClass("li_selected");
						}
					}
				});
				$("#"+index).attr("class", "li_selected");
				this.premises.projectCode = info.projectCode;
				this.premises.projectName = info.projectName;
			},savePremisesByM2() {
                if(this.premises.projectCode == ""){
                	layer.msg("请选择一个楼盘");
                	return false;
                }
        		$('#addChooseM2').modal('hide');
				//子组件向父组件传递信号: 调用父组件中对子组件的监听
				this.$emit('saveChooseM2Listener', this.premises);
			}
		}
	}
	
</script>